
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Build a slick CSS3 Login Form - No images allowed</title>
<meta name="description"
	content="How to build a slick CSS3 Login Form with no images.">





<style type="text/css">
* {
	margin: 0px;
	padding: 0px;
	outline: none;
}

body {
	background: #5580cf;
}

form {
	border: 1px solid #270644;
	width: 250px;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	background: -moz-linear-gradient(19% 75% 90deg, #4E0085, #963AD6);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#963AD6),
		to(#4E0085) );
	margin: 50px auto;
	padding: 20px;
	-moz-box-shadow: 0px -5px 300px #270644;
	-webkit-box-shadow: 0px -5px 300px #270644;
}

label {
	font-size: 12px;
	font-family: arial, sans-serif;
	list-style-type: none;
	color: #fff;
	text-shadow: #000 1px 1px;
	margin-bottom: 10px;
	font-weight: bold;
	letter-spacing: 1px;
	text-transform: uppercase;
	display: block;
}

input {
	-webkit-transition-property: -webkit-box-shadow, background;
	-webkit-transition-duration: 0.25s;
	padding: 6px;
	border-bottom: 0px;
	border-left: 0px;
	border-right: 0px;
	border-top: 1px solid #ad64e0;
	-moz-box-shadow: 0px 0px 2px #000;
	-webkit-box-shadow: 0px 0px 2px #000;
	margin-bottom: 10px;
	background: #dceeff;
	width: 230px;
}

input.submit {
	-webkit-transition-property: -webkit-box-shadow, background;
	-webkit-transition-duration: 0.25s;
	width: 100px;
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#963AD6),
		to(#781bb9) );
	background: -moz-linear-gradient(19% 75% 90deg, #781bb9, #963AD6);
	color: #5580cf;
	text-transform: uppercase;
	text-shadow: #000 1px 1px;
	border-top: 1px solid #ad64e0;
	margin-top: 10px;
}

input.submit:active {
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#781bb9),
		to(#963AD6) );
	background: -moz-linear-gradient(19% 75% 90deg, #963AD6, #781bb9);
}
</style>
</head>

<body>
	<form action="">

		<label>Member Number</label>
		<input type="text" name="username" />
		<label>Password</label>
		<input type="password" name="password" />
		<input type="button" value="Submit" name="submit" class="submit" />
	</form>

</body>
</html>
